<template>
  <div class="header" ref="header">
    <span class="title active">{{title}}</span>
    <div class="icon-list">
<!--      <img class="icon" src="img/ic_search.png" ng-click="toSearch()"/>-->
<!--      <img class="icon" src="img/ic_scan.png"/>-->
<!--      <img class="icon" src="img/ic_calendar.png" ng-click="goCalender()"/>-->
<!--      <img class="icon" src="img/icon/ic_admin.png" ng-click="toMy()"/>-->
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import headerBg from '@/assets/header-bg.png'

  export default {
    components: {},
    props:["title"],
    data() {
      return {
        accountInfo: {},
        activeIndex: '1',
        langVisible: false,
        user: {},
        headerBg:headerBg,
        headerCss: {
          // "height": "48px",
          // "font-size": "20px",
          // "background-image": 'url('+ require('@/assets/header-bg.png') + ')',
          // "background-size": "100%",
          // "background-repeat": "no-repeat",
        },
      }
    },
    methods: {
      back() {
      },
      rightFn() {
      },
    },
    mounted() {
      var accountInfo = sessionStorage.getItem("accountInfo")
      if (accountInfo) {
        this.accountInfo = accountInfo
        this.user = {
          userName: accountInfo.userName,
          headImg: accountInfo.headImg,
          role: accountInfo.role,
          createTime: accountInfo.createTime,
        }
      }
      this.$refs.header.style.setProperty('--bg-img','url('+ require('@/assets/header-bg.png') + ')')
    },
    computed: {
      ...mapState({
        themeColor: state => state.app.themeColor,
        collapse: state => state.app.collapse
      })
    },
  }
</script>

<style scoped lang="scss">
  :root{
    --bg-img: none;
  }
  .header{
    width: 100%;
    height: 48px;
    font-size: 20px;
    background: var(--bg-img);
    background-size: 100%;

    .input-normal{
      width: 80%;
      height: 34px;
      line-height: 34px;
      font-size: 12px;
      border-radius: 6px;
      background-color: #FFFFFF;
      color: #000000;
      padding: 0 11px;
    }
    input{
      margin: 7px 4% 0 5%;
      float: left;
    }
    input[placeholder]{
      color: #AAAAAA;
    }
    .search-cancel{
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      float: left;
      margin-top: 12px;
      color: #FFFFFF;
      font-weight: bold;
    }
    .back{
      width: 11px;
      height: 17px;
      margin: 15px 0 0 22px;
      /*background: url("../img/icon/ic_back.png") no-repeat;*/
      position: absolute;
      z-index: 99;
    }
    .title{
      height: 28px;
      line-height: 28px;
      margin: 10px 0 0 20px;
      color: #92BFDF;
      display: inline-block;
    }
    .title-center{
      width: 100%;
      height: 28px;
      line-height: 28px;
      margin-top: 11px;
      color: #ffffff;
      display: inline-block;
      text-align: center;
      position: relative;
    }
    .title-center.tab span{
      color: #92BFDF;
    }
    .title-center.tab span.active{
      color: #ffffff;
    }
    .title-center .title-right{
      height: 28px;
      line-height: 28px;
      font-size: 16px;
      color: #92BFDF;
      position: absolute;
      right: 15px;
    }
    .title-center i{
      margin-left: 7px;
      /*background: url("../img/icon/ic_arrow.png") no-repeat;*/
    }
    .title.active{
      color: #ffffff;
    }
    .icon-list{
      position: absolute;
      top: 8px;
      right: 15px;
    }
    .icon-list .icon{
      width: 32px;
      height: 32px;
      margin: 0 0 0 12px;
    }
  }
</style>
